{% extends "../main.html" %}

{% block bodyy %}

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">软件部署</h3>
    </div>
    <div class="panel-body">
        <form class="form-horizontal" method="post">

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">安装前初始操作</label>
                <div class="col-sm-5">
                    <select id="sel_menu" class="form-control" name="dst_before_op">
                        <option value="0">否</option>
                        <option value="1">是</option>
                    </select>
                </div>
                <div class="col-sm-5">
                    <select id="sel_menu" class="form-control" name="dst_before_cmd">
                        <option value="update">更新系统</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">*目标机组</label>
                <div class="col-sm-10">
                    <select id="mainselect" class="form-control" name="dst_group" ></select>
                    <!--<select id="midselect" class="form-control" name="midselect" ></select>-->
                    <!--<select id="backselect"class="form-control"  name="backselect" ></select>-->
                </div>
            </div>
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">*目标主机</label>
                <div class="col-sm-10">
                    <select id="midselect" class="form-control" name="dst_host" ></select>
                </div>
            </div>


            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">*所需服务</label>
                <div class="col-sm-10">
                    <select id="sel_menu" class="form-control" name="dst_server">
                        <option value="0">请选择安装的服务</option>
                        <option value="nigx">nigx</option>
                        <option value="apache">apache</option>
                        <option value="mysql">mysql</option>
                        <option value="mariadb-server">mariadb-server</option>
                        <option value="redis">redis</option>
                        <option value="php-fpm">php-fpm</option>
                    </select>

                </div>
            </div>


            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">是否随系统启动</label>
                <div class="col-sm-10">
                    <select id="sel_menu" class="form-control" name="dst_autostart">
                        <option value="1">是</option>
                        <option value="0">否</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">安装后扫尾操作</label>
                <div class="col-sm-5">
                    <select id="sel_menu" class="form-control" name="dst_after_op">
                        <option value="0">否</option>
                        <option value="1">是</option>
                    </select>
                </div>
                <div class="col-sm-5">
                    <select id="sel_menu" class="form-control" name="dst_after_cmd">
                        <option value="stop">关闭服务</option>
                        <option value="start">开启服务</option>
                        <option value="restart">重启服务</option>
                        <option value="init 0">关闭系统</option>
                        <option value="reboot">重启系统</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-5 col-sm-10">
                    <button type="submit" class="btn btn-primary">立即部署</button>
                    <button type="reset" class="btn btn-danger">取消重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
{% end %}

{% block body_js %}
<script type="text/javascript">
var threeSelectData={
    //"选择频道":{
    //    val:"0",
    //    items:{
    //        "二级子菜单":{
    //            val:"0",
    //            items:{
     //               "三级子菜单":"0"
     //           }
     //       }
     //   }
    //},
    "请选择":{
        val:"0",
        items:{
            "请选择":{val:"0",items:{}},
        }
    },
    {% for i in dd %}
    {% if i %}
    "{{dd[i]['name']}}":{
        val:"{{i}}",
        items:{
            "请选择":{val:"0",items:{}},
            "All":{val:"1",items:{}},
            {% for n in dd[i]['data'] %}
            "{{n}}":{val:"{{n}}",items:{}},
            {% end %}
        }
    },
    {% end %}
    {% end %}


};

var defaults = {
    s1:'mainselect',
    s2:'midselect',
    s3:'backselect'
};

$(function(){
    threeSelect(defaults);
});

function threeSelect(config){
    var $s1=$("#"+config.s1);
    var $s2=$("#"+config.s2);
    var $s3=$("#"+config.s3);
    var v1=config.v1?config.v1:null;
    var v2=config.v2?config.v2:null;
    var v3=config.v3?config.v3:null;
    $.each(threeSelectData,function(k,v){
        appendOptionTo($s1,k,v.val,v1);
    });

    $s1.change(function(){
        $s2.html("");
        $s3.html("");
        if(this.selectedIndex==-1)
        return;

        var s1_curr_val = this.options[this.selectedIndex].value;

        $.each(threeSelectData,function(k,v){
            if(s1_curr_val==v.val){
                if(v.items){
                    $.each(v.items,function(k,v){
                        appendOptionTo($s2,k,v.val,v2);
                    });
                }
            }
        });

        if($s2[0].options.length==0){
            appendOptionTo($s2,"...","",v2);
        }

        $s2.change();

    }).change();

    $s2.change(function(){
        $s3.html("");
        var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;
        if(this.selectedIndex==-1)
        return;

        var s2_curr_val = this.options[this.selectedIndex].value;

        $.each(threeSelectData,function(k,v){
            if(s1_curr_val==v.val){
                if(v.items){
                    $.each(v.items,function(k,v){
                        if(s2_curr_val==v.val){
                            $.each(v.items,function(k,v){
                                appendOptionTo($s3.show(),k,v,v3);
                            });
                        }
                    });

                    if($s3[0].options.length==0){
                        appendOptionTo($s3.hide(),"...","",v3);
                    }
                }
            }
        });

    }).change();

    function appendOptionTo($o,k,v,d){

        var $opt=$("<option>").text(k).val(v);

        if(v==d){
            $opt.attr("selected", "selected")
        }
        $opt.appendTo($o);
    }

}
</script>

{% end %}
